<template>
  <div class="components-tree">
    <div class="tree-title flex p_10 justify_between fontsize_14">
      <span>图层</span>
      <div>
        <span class="px_4 fontsize_12 iconfont icon-zuhe cursor_point"></span>
        <span class="px_4 fontsize_12 iconfont icon-quxiaozuhe cursor_point"></span>
        <span class="px_4 fontsize_12 iconfont icon-left cursor_point" @click="handleCloseTree"></span>
      </div>
    </div>
    <div class="tree-operate flex align_center justify_around w_100">
      <el-tooltip effect="dark" content="上移" placement="bottom">
        <i class="cursor_point iconfont icon-shangyi" @click="upComponent"></i>
      </el-tooltip>
      <el-tooltip effect="dark" content="下移" placement="bottom">
        <i class="cursor_point iconfont icon-xiayi" @click="downComponent"></i>
      </el-tooltip>
      <el-tooltip effect="dark" content="置顶" placement="bottom">
        <i class="cursor_point iconfont icon-shangyi1" @click="topComponent"></i>
      </el-tooltip>
      <el-tooltip effect="dark" content="置底" placement="bottom">
        <i class="cursor_point iconfont icon-xiayi1" @click="bottomComponent"></i>
      </el-tooltip>
    </div>
    <div class="tree-content">
      <el-tree :data="pageComponents" :props="defaultProps" @node-click="handleNodeClick" class="design-tree pt_6"
        :expand-on-click-node="false">
        <template #default="{ data }">
          <div class="tree-item flex justify_between align_center w_100 px_6"
            :class="data.hidden?'tree-node-visible':''">
            <div class="tree-item-node" v-if="data.type === 'van-group'">
              <span><i class="iconfont px_4 fontsize_12 icon-wenjianjia"></i> {{ data.alias }}</span>
            </div>
            <div class="tree-item-node flex align_center justify_start" v-else>
              <el-image :src="data.img" fit="fill" class="tree-item-node-img pr_6"></el-image>
              <span>{{ data.alias }}</span>
            </div>
            <div class="tree-item-node-operate">
              <i class="iconfont px_4 fontsize_12" :class="!data.hidden?'icon-yanjing-zhengyan':'icon-biyan'"></i>
              <i class="iconfont px_4 fontsize_12" :class="!data.locked?'icon-jiesuo1':'icon-suoding'"></i>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";
// import { design } from "../../../../mock/layer.js";
import { useDesignStore } from "../../../../store/design";

export default defineComponent({
  name: "design-tree",
  setup() {
    const designStore = useDesignStore();
    const pageComponents = computed(() => designStore.pageComponents);
    const curComponent = computed(() => designStore.curComponent);
    const handleNodeClick = (data) => {
    };
    const defaultProps = {
      children: "children",
      label: "name",
    };
    const handleCloseTree = () => {
      designStore.closeDesignTreeShow();
    };
    const topComponent = () => {
      designStore.topComponent();
      designStore.addSnapshot();
    };
    const bottomComponent = () => {
      designStore.bottomComponent();
      designStore.addSnapshot();
    };
    const upComponent = () => {
      designStore.upComponent();
      designStore.addSnapshot();
    };
    const downComponent = () => {
      designStore.upComponent();
      designStore.addSnapshot();
    };
    onMounted(() => {
    });
    return {
      curComponent,
      pageComponents,
      defaultProps,
      topComponent,
      bottomComponent,
      upComponent,
      downComponent,
      handleCloseTree,
      handleNodeClick,
    };
  },
});
</script>

<style lang="less" scoped>
@import url("./index.less");

.components-tree {
  .design-tree {
    background-color: #1d2126;
    user-select: none;

    :deep(.el-tree-node) {
      .el-tree-node__content:hover {
        background-color: #27384c;
      }
    }

    :deep(.el-tree-node.is-current) {
      & > .el-tree-node__content {
        background-color: #3d9cff;
      }

      & > .el-tree-node__content:hover {
        background-color: #3d9cff;
      }

      .el-tree-node__children {
        background: #1c2938;
      }
    }

    :deep(.el-tree-node__content) {
      height: 50px;
      color: white;
      font-size: 14px;
      & > i {
        display: none;
      }
      .tree-item-node {
        color: #e2e2e2;

        .tree-item-node-img {
          height: 30px;
        }
      }
    }
  }
}
</style>